<script setup lang="ts">
import '@/assets/price-ticker.js'
import {computed, onBeforeMount, onUnmounted, ref, watch} from "vue";
import {BTCData} from "@/api/type";
import {useSettingStore} from "@/store/modle/setting";
const settingStore = useSettingStore();
var coinKey = settingStore.setting.btc.selectValue.value;
var baseKey = 'united-states-dollar';
var secondaryKey = settingStore.setting.btc.selectValue.value;
var convertToBase = 'united-states-dollar' === baseKey;

var params = {
  baseKey: baseKey,
  secondaryKey: secondaryKey,
  convertToBase: convertToBase,
};
const priceSpace = computed(() => {
  return data.value.price!.replace(' ', '');
});
const getBtcBase = (url: string, params: any) => {
  var queryParams = [];
  for (var field in params) {
    queryParams.push(`${field}=${params[field]}`);
  }

  var getUrl = url;
  if (queryParams.length) {
    getUrl += `?${queryParams.join('&')}`;
  }

  var oReq = new XMLHttpRequest();
  oReq.open('GET', getUrl);
  oReq.send();
  oReq.onload = function () {
    var json = JSON.parse(oReq.response);
    data.value = json.data;
  };
};
const data = ref<BTCData>({
  changePercent: 0,
  image: "",
  key: "",
  marketCap: "",
  name: "",
  price: "",
  rank: 0,
  secondaryPrice: "",
  statSymbol: "",
  symbol: "",
  volume: ""
})
// 四舍五入 保留两位小数
const toFixed = (num: number) => {
  return Math.round(num * 100) / 100;
}
let timer: any = null;
const start = () => {
  if (timer) {
    clearInterval(timer);
  }
  //先执行一次
  getBtcBase(`https://api.cryptorank.io/v0/widget/price-ticker/${coinKey}`, params)
  //十秒执行一次
  timer = setInterval(() => {
    getBtcBase(`https://api.cryptorank.io/v0/widget/price-ticker/${coinKey}`, params)
  }, 1000*60,{immediate: true});
}
watch(() => settingStore.setting.btc.selectValue.value, (val) => {
  console.log("触发变化");
  coinKey = val;
  secondaryKey = val;
  start();
}, {immediate: true})

onBeforeMount(async () => {
  start()
})

onUnmounted(() => {
  clearInterval(timer);
})
</script>

<template>
  <section class=" h-screen overflow-hidden flex items-center justify-center">
    <div class="flex items-center space-x-[2rem]">
      <img :src="data.image" alt="" class="h-[12rem]"/>
      <div>
        <div class="text-[10rem] text-jacarta-800 dark:text-jacarta-100">{{ priceSpace }}</div>
        <div class="flex items-center space-x-[1rem] -mt-[1rem] ml-[2rem]" :class="data.changePercent<0?'text-red':'text-green'">
          <div :class="data.changePercent<0?'down':'up'"></div>
          <span class="text-[4rem] font-bold">{{toFixed(data.changePercent)}}%</span>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.read-the-docs {
  color: #2e2d2f;
}

.down {
  width: 0;
  height: 0;
  border-top: 4rem solid rgba(239, 68, 68, var(--tw-text-opacity));;
  border-right: 2rem solid transparent;
  border-left: 2rem solid transparent
}

.up {
  width: 0;
  height: 0;
  border-bottom: 4rem solid rgba(16, 185, 129, var(--tw-text-opacity));;
  border-right: 2rem solid transparent;
  border-left: 2rem solid transparent
}
</style>
